<template>
   <page-meta :page-style="$theme.pageStyle">
    <!-- #ifndef H5 -->
    <navigation-bar
        :front-color="$theme.navColor"
        :background-color="$theme.navBgColor"
    />
    <!-- #endif -->
  </page-meta>

  <page-bg></page-bg>
  <u-navbar
      :safeAreaInsetTop="false"
      :placeholder="false"
      :is-back="true"
      :is-fixed="true"
      :title="$theme.title"
      :border-bottom="false"
      :title-bold="true"
      :title-color="'#111111'"
      :background="{ background : navBg }"
  >
  </u-navbar>
  <view class="page">
    <!-- 提现金额输入 -->
    <view class="amount-section">
      <text class="section-label">提现金额</text>
      <view class="amount-input-wrapper">
        <text class="currency">¥</text>
        <input 
          type="digit" 
          v-model="amount" 
          class="amount-input"
          placeholder="0.00"
        />
        <text class="all-btn" @click="selectAll">全部提现</text>
      </view>
      <view class="amount-info">
        <text class="fee-text">5%手续费</text>
        <text class="available-text">可提金额：¥ {{ balance }}</text>
      </view>
    </view>

    <!-- 提现到 -->
    <view class="method-section">
      <text class="section-label">提现到</text>
      <view class="method-tabs">
        <view 
          v-for="(method, index) in withdrawMethods" 
          :key="index"
          class="method-tab"
          :class="{ active: selectedMethod === method }"
          @click="selectMethod(method)"
        >
          {{ method }}
        </view>
      </view>

      <!-- 上传收款码 -->
      <view class="upload-section">
        <view 
          v-if="qrCode"
          class="qr-preview"
          @click="previewQrCode"
        >
          <image :src="qrCode" class="qr-img" mode="aspectFill"></image>
        </view>
        <view 
          v-else
          class="qr-upload"
          @click="uploadQrCode"
        >
          <text class="upload-icon">+</text>
        </view>
        <text class="upload-label">上传收款码</text>
      </view>

      <view class="upload-tips">
        <text class="tips-text">请不要上传截图，有可能导致失败，请</text>
        <text class="tips-link">上传保存的收款码</text>
      </view>
    </view>

    <!-- 提示信息 -->
    <view class="notice">
      <text class="notice-text">*预计3个工作日到账</text>
    </view>

    <!-- 提交按钮 -->
    <view class="footer">
      <view class="submit-btn" @click="submit">提交</view>
      <view class="record-link" @click="goToRecord">提现记录</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'WithdrawApply',
  props:{
    module:{
      default:"",
      type:String,
      required:true
    }
  },
  data() {
    return {
      balance: '1200.00',
      amount: '',
      withdrawMethods: ['银行卡', '支付宝', '微信'],
      selectedMethod: '微信',
      qrCode: ''
    }
  },
  methods: {
    selectAll() {
      this.amount = this.balance
    },
    selectMethod(method) {
      this.selectedMethod = method
    },
    uploadQrCode() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.qrCode = res.tempFilePaths[0]
        }
      })
    },
    previewQrCode() {
      uni.previewImage({
        urls: [this.qrCode],
        current: this.qrCode
      })
    },
    goToRecord() {
      console.log(116,this.module);
      
      uni.navigateTo({ 
        url: `/packages/pages/${this.module}/withdraw/applyHistory`
      })
    },
    submit() {
      if (!this.amount) {
        return uni.showToast({ title: '请输入提现金额', icon: 'none' })
      }
      if (parseFloat(this.amount) <= 0) {
        return uni.showToast({ title: '提现金额必须大于0', icon: 'none' })
      }
      if (parseFloat(this.amount) > parseFloat(this.balance)) {
        return uni.showToast({ title: '提现金额不能大于可提现金额', icon: 'none' })
      }
      if (!this.qrCode) {
        return uni.showToast({ title: '请上传收款码', icon: 'none' })
      }

      uni.showLoading({ title: '提交中...' })
      
      // 调用提现接口
      setTimeout(() => {
        uni.hideLoading()
        uni.redirectTo({ 
          url: `/packages/pages/${this.module}/withdraw/success`
        })
      }, 1000)
    }
  }
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20rpx;
  padding-bottom: 200rpx;
}

/* 金额输入区域 */
.amount-section {
  background: #fff;
  border-radius: 20rpx;
  padding: 32rpx 28rpx;
  margin-bottom: 20rpx;
}

.section-label {
  font-size: 28rpx;
  color: #999;
  display: block;
  margin-bottom: 20rpx;
}

.amount-input-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.currency {
  font-size: 56rpx;
  color: #333;
  font-weight: 600;
  margin-right: 8rpx;
}

.amount-input {
  flex: 1;
  font-size: 56rpx;
  color: #333;
  font-weight: 600;
}

.all-btn {
  font-size: 28rpx;
  color: #ff2aa6;
  padding: 8rpx 20rpx;
}

.amount-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fee-text {
  font-size: 24rpx;
  color: #999;
}

.available-text {
  font-size: 24rpx;
  color: #999;
}

/* 提现方式区域 */
.method-section {
  background: #fff;
  border-radius: 20rpx;
  padding: 32rpx 28rpx;
  margin-bottom: 20rpx;
}

.method-tabs {
  display: flex;
  gap: 16rpx;
  margin-bottom: 32rpx;
}

.method-tab {
  flex: 1;
  height: 72rpx;
  background: #f7f7f7;
  border-radius: 36rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #666;
  border: 2rpx solid transparent;
}

.method-tab.active {
  background: linear-gradient(135deg, #ffe0f7 0%, #ffc9f0 100%);
  color: #ff2aa6;
  font-weight: 600;
  border-color: #ff2aa6;
}

/* 上传区域 */
.upload-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20rpx;
}

.qr-upload {
  width: 320rpx;
  height: 320rpx;
  border: 2rpx dashed #ddd;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  margin-bottom: 16rpx;
}

.upload-icon {
  font-size: 80rpx;
  color: #ccc;
}

.qr-preview {
  width: 320rpx;
  height: 320rpx;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 16rpx;
}

.qr-img {
  width: 100%;
  height: 100%;
}

.upload-label {
  font-size: 28rpx;
  color: #666;
}

.upload-tips {
  text-align: center;
}

.tips-text {
  font-size: 24rpx;
  color: #999;
}

.tips-link {
  font-size: 24rpx;
  color: #ff2aa6;
}

/* 提示信息 */
.notice {
  padding: 20rpx 28rpx;
}

.notice-text {
  font-size: 24rpx;
  color: #ff2aa6;
}

/* 底部按钮 */
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20rpx;
  background: linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, rgba(245, 245, 245, 1) 30%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  border-radius: 44rpx;
  background: linear-gradient(90deg, #ff8fe5, #ff5acf);
  color: #fff;
  font-size: 32rpx;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(255, 90, 207, 0.3);
}

.record-link {
  font-size: 28rpx;
  color: #999;
  padding: 12rpx 0;
  text-decoration: underline;
}
</style>
